<template>
	<div class="header">
		<div class="h_left" @click="router.push('/home')">
			<ul>
				<li>
					<p>{{ currentHour }}:{{ currentMinute }}:{{ currentSeconds }}</p>
					<span>
						{{ currentYear }}年{{ currentMonth }}月{{ currentDay }}日
					</span>
				</li>
				<li>上海.崇明</li>
				<li>17多云</li>
				<li>PM2.5:57</li>
			</ul>
		</div>
		<div class="h_center">
			<span> “沪未云”未成年人保护检察监督预警平台 </span>
		</div>
		<div class="h_right" @click="router.push('/home')">
			<div v-if="RouterName === 'DataModel'">
				<img src="../assets/img/goback.png" alt="" />返回
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { onMounted, onBeforeUnmount, ref, Ref, watch } from 'vue'
import { useRouter } from 'vue-router'
let currentYear: Ref = ref(null)
let currentMonth: Ref = ref(null)
let currentDay: Ref = ref(null)
let currentHour: Ref = ref(null)
let currentMinute: Ref = ref(null)
let currentSeconds: Ref = ref(null)
let timer: Ref = ref(null)
let router = useRouter()
const RouterName = ref('')
onMounted(() => {
	timer.value = setInterval(() => {
		updateTime()
	}, 1000)
})

onBeforeUnmount(() => {
	clearInterval(timer.value)
})
watch(
	() => router.currentRoute,
	(to: any, from: any) => {
		RouterName.value = to.value.name
		console.log('路由名称', RouterName.value)
	},
	{
		deep: true,
		immediate: true,
	}
)

const updateTime = () => {
	const now = new Date()
	currentYear.value = now.getFullYear().toString()
	currentMonth.value = (now.getMonth() + 1).toString().padStart(2, '0') // Months are zero-based, so add 1
	currentDay.value = now.getDate().toString().padStart(2, '0')
	currentHour.value = now.getHours().toString().padStart(2, '0')
	currentMinute.value = now.getMinutes().toString().padStart(2, '0')
	currentSeconds.value = now.getSeconds().toString().padStart(2, '0')
}
</script>

<style lang="less" scoped>
.header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	width: 100%;
	padding: 0 60px;
	height: 70px;
	background: url('../assets/img/headerBG.png') no-repeat center;
	background-size: 100% 100%;
	// border: 1px solid pink;
	.h_left {
		width: 33%;
		display: flex;
		align-items: center;
		img {
			width: 66px;
			height: 67px;
			margin-right: 14px;
		}
		ul {
			color: white;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 16px;
			display: flex;
			align-items: center;
			li {
				font-size: 12px;
				font-family: Source Han Sans CN;
				margin-right: 30px;
				position: relative;
				&:nth-child(-n + 3) {
					&::after {
						position: absolute;
						right: -20px;
						top: 50%;
						transform: translateY(-50%);
						content: '';
						width: 1px;
						height: 22px;
						background: #ffffff;
						opacity: 0.5;
					}
				}

				&:nth-child(2) {
					font-size: 24px;
				}
				&:nth-child(3) {
					font-size: 26px;
				}
				&:nth-child(4) {
					font-size: 26px;
				}
				p {
					&:first-child {
						margin-bottom: 5px;
						font-size: 20px;
					}
				}
			}
		}
	}
	.h_center {
		width: 33%;
		display: flex;
		justify-content: center;
		align-items: flex-start;
		margin-bottom: 15px;
		font-size: 30px;
		font-family: zixiaohunbianquehei;
		font-weight: 400;
		color: #ffffff;
		text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
		color: linear-gradient(0deg, #104e9b 7.9833984375%, #ffffff 84.6435546875%);
	}
	.h_right {
		width: 33%;
		> div {
			cursor: pointer;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			img {
				width: 24px;
				height: 24px;
				margin-right: 15px;
			}
			font-size: 23px;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #ffffff;
			line-height: 39px;
		}
	}
}
</style>
